import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { TabBar, Icon } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import EntrancePage from '../tabpages/entrance';
import AboutPage from '../tabpages/about';

const defaultListParams = {
  id: 0,
  pagesize: 10,
  msgid: 0,
  mintime: 0,
  bizstate: '',
  current: 1
}

@inject('yulinStore')
@withRouter
@observer
export default class Entrance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false,
      fullScreen: false,
    };
  }


  componentDidMount() {
    const { getMessageData } = this.props.yulinStore;
    getMessageData(defaultListParams);
  }

  getTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (data) => {
          return (
            <div className={'message-item-wrapper'}>
              <div className={'message-time'}>{data.time}</div>
              <div className={'message-item'}>
                <div className={'message-name'}>{data.name}</div>
                <div className={'message-title'}>{data.title}</div>
                <div className={'message-content'}
                  dangerouslySetInnerHTML={{ __html: data.context }}
                >
                </div>
                <div className={'message-footer'}><span>阅读详情</span><Icon color={'#666'} type={'right'} size={'xs'} /></div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  onEndReached() {
    const { yulinStore } = this.props;
    const { list, getMessageData } = yulinStore;
    const { current, msgid, mintime } = list;
    const params = {
      current: current + 1,
      pagesize: 10,
      msgid: msgid,
      mintime: mintime,
    }
    getMessageData(params);
  }

  onRefresh() {
    const { yulinStore } = this.props;
    const { getMessageData } = yulinStore;
    getMessageData(defaultListParams);
  }


  render() {
    const { yulinStore } = this.props;
    const { selectedTab, list, setState } = yulinStore;

    return (
      <div className={'wea-yulin-entrance'}>
        <TabBar
          unselectedTintColor="#666"
          tintColor="#55b1f9"
          barTintColor="white"
        >
          <TabBar.Item
            title="消息"
            key="Message"
            icon={<Icon color={'#666'} type={'new-chat'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'new-chat'} size={'md'} />}
            selected={selectedTab === 'Message'}
            onPress={() => {
              this.onRefresh();
              setState({
                selectedTab: 'Message',
              });
            }}
          >
            <ListViewPage.Normal
              className="wm-yulin-list-view-page"
              store={list}
              getTemplate={this.getTemplate}
              onEndReached={() => this.onEndReached()}
              onRefresh={() => this.onRefresh()}
              getDataCustom={true}
              heightSpace={50}
            />
          </TabBar.Item>
          <TabBar.Item
            title="工作台"
            key="Entance"
            icon={<Icon color={'#666'} type={'pc'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'pc'} size={'md'} />}
            selected={selectedTab === 'Entance'}
            onPress={() => {
              setState({
                selectedTab: 'Entance',
              });
            }}
          >
            <EntrancePage />
          </TabBar.Item>
          <TabBar.Item
            title="我"
            key="Me"
            icon={<Icon color={'#666'} type={'man'} size={'md'} />}
            selectedIcon={<Icon color={'#55b1f9'} type={'man'} size={'md'} />}
            selected={selectedTab === 'Me'}
            onPress={() => {
              setState({
                selectedTab: 'Me',
              });
            }}
          >
            <AboutPage />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}